<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">
  用户注册
  <p>姓名:<input  type="text" v-model.lazy="displayName" @change="checkState"/> <span v-if="checkStatue">可注册</span></p>
  <p>年龄:<input  type="number" v-model.number="age"/></p>
  <p>备注:<textarea v-model.trim="remark"></textarea></p>

  <div style="border: #abc123 1px solid;width:500px;">
    <p>姓名:{{displayName}}</p>
    <p>性别:{{age}}</p>
    <p>备注:{{remark}}</p>
  </div>


</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {
      displayName: "",
      age: "",
      remark: "",
      checkStatue:false
    },
    methods: {
      checkState:function(){
        if (this.displayName.length!=0 ){
          this.checkStatue=true;
        }else{
          this.checkStatue=false;
        }
      }
    }

  })
</script>
</body>
</html>
